<template>
  <a-modal
    v-model="isShow"
    v-show="selectTables && selectTables.length > 1"
    title="打印选择"
    :dialog-style="{
       top: '20px'
    }"
    :bodyStyle="{
      'height': '60vh',
    }"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <template slot="footer">
      <a-button
        type="danger"
        size="large"
        key="back"
        @click="handleCancel"
      >
        取消
      </a-button>
      <a-button
        key="submit"
        size="large"
        type="primary"
        @click="handleOk"
      >
        确认
      </a-button>
    </template>
    <div
      class="dialog-content"
      :style="styleVar"
    >
      <div class="dialig-tips">请选择要打印调整的单子</div>
      <div class="dialog-choose-tables">
        <span
          class="test"
          v-show="tableId === '15'"
        >该表(因公出国境)暂时不做</span>
        <ul>
          <li
            v-for="(item, index) in selectTables"
            :key="index"
            @click="handSelectTable(item)"
          >
            <a>{{item}}</a>
          </li>
        </ul>
      </div>
    </div>
  </a-modal>
</template>

<script>
const tableMap = {
  '项目支出': [ //项目支出
    '单位项目支出预算追加审批表',
    '区级重点项目资金预算指标追加审批表',
    '单位财政专户支出预算追加审批表',
    '省（市）专项补助资金审批表'
  ],

  '基本支出': ['单位基本支出预算追加审批表'],//固定 2

  '调整': ['已批复预算总额内调剂审批表', '采购预算调整审批表'],//固定  4~9

  '核减': ['采购预算核减审批表']  //11
}

const map = new Map([
  [['上级补助', '上年结转（上级补助）'], ['省（市）专项补助资金审批表']],
  [['年初预算(本级)'], ['区级重点项目资金预算指标追加审批表']],
  [['调整预算'], 'search again'],
])
const idMap = {
  '调整': ['4', '5', '6', '7', '8', '9', '15'],
  '项目支出': ['10'],
  '核减': ['11'],
  '基本支出': ['2']
}
export default {
  data () {
    return {
      styleVar: {
        '--colorRed': 'red'
      },
      color: 'blue',
      isShow: false,
      tableMap: new Map(Object.entries(tableMap)),
      map
    }
  },
  methods: {
    handleCancel () {
      window.close()
    },
    handleOk () {
      this.styleVar['--colorRed'] = 'pink';
    },
    handSelectTable (item) {
      this.$emit('ok', item)
      this.$emit('closeDialog')
    },
  },
  computed: {
    selectTables () {
      let res = [];
      let flag = false;
      for (const key in idMap) {
        if (idMap[key].indexOf(this.tableId) !== -1) {
          flag = true
          res = tableMap[key]
        }
      }
      if (!flag) {
        [...this.map.keys()].forEach(keys => {
          keys.forEach(key => {
            if (this.types.indexOf(key) !== -1) {
              if (key === '调整预算') {
                const [a] = this.resourceCateName;
                if (a.includes('预算')) {
                  res = [...res, '单位项目支出预算追加审批表']
                } else {
                  res = [...res, '单位财政专户支出预算追加审批表']
                }
              } else {
                res = [
                  ...res,
                  ...this.map.get(keys)
                ]
              }
            }
          })
        });
      }

      if (res.length === 1) {
        this.handSelectTable(...res)
      }
      return res
    },
  },
  props: {
    title: {
      type: String,
      default: () => ''
    },
    visible: {
      type: Boolean,
      default: () => false
    },
    types: {
      type: Array,
      default: () => []
    },
    // 资金来源
    resourceCateName: {
      type: Array,
      default: () => []
    },
    tableId: {
      type: String,
      required: true
    }
  },
  watch: {
    'visible': {
      handler: function (value) {
        this.isShow = value
      },
      immediate: true
    }
  },
}
</script>

<style lang="less" scoped >
/deep/ .ant-modal-content {
  width: 50vw;
  transform: translate(-15%);
  .ant-modal-header {
    border-bottom: none;
    .ant-modal-title {
      font-size: 18px;
      color: #303133da;
      font-weight: 600;
    }
  }
  .ant-modal-body {
    padding: 0;
  }
  .ant-modal-footer {
    border-top: none;
  }
}
.dialog-content {
  height: 100%;
  padding: 10px 24px;
  .dialig-tips {
    color: red;
  }
  .dialog-choose-tables {
    margin-top: 40px;
    li {
      margin: 10px 0;
    }
  }
}
.test {
  color: var(--colorRed);
}
</style>
